<template>
    <div class="com_box height_100 over_box">
        <div class="create_head flexbox flexcenter flexbetween">
            <img src="../../assets/img/step_icon1.svg" alt="">
        </div>
        <div class="step_box">
            <el-form ref="createform" :model="dataForm" label-position="top" class="create_form" :hide-required-asterisk='true'>
                <el-form-item label="" prop="market" :rules="{required: true, message: '请选择营销目标', trigger: ['blur', 'change']}" style="margin-bottom:0">
                    <div class="market_title">营销目标</div>
                    <el-radio-group :value="dataForm.market" class="marker_radio" @input="clearSeetion">
                        <el-radio label="VIDEO_PROM_GOODS">
                            <img src="../../assets/img/market_icon1.svg" alt="" class="market_icon">
                            <span class="market_name">短视频/图文带货</span>
                            <span class="market_text">吸引用户直接购买商品</span>
                            <img src="../../assets/img/market_checked.svg" alt="" class="market_check">
                        </el-radio>
                        <el-radio label="LIVE_PROM_GOODS">
                            <img src="../../assets/img/market_icon2.svg" alt="" class="market_icon">
                            <span class="market_name">直播带货</span>
                            <span class="market_text">吸引用户进入直播间</span>
                            <img src="../../assets/img/market_checked.svg" alt="" class="market_check">
                        </el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="" prop="campaign_scene" :rules="{required: true, message: '请选择营销场景', trigger: ['blur', 'change']}" style="margin-bottom:0">
                    <div class="market_title" style="margin-top:40px">营销场景</div>
                    <el-radio-group :value="dataForm.campaign_scene" class="marker_radio" @input="selectCampaign">
                        <el-radio label="DAILY_SALE">
                            <img src="../../assets/img/market_icon1.svg" alt="" class="market_icon">
                            <span class="market_name">日常销售</span>
                            <span class="market_text">满足商家日常销售需求,支持多种深浅转化目标,提升商品销量</span>
                            <img src="../../assets/img/market_checked.svg" alt="" class="market_check">
                        </el-radio>
                        <el-radio label="NEW_CUSTOMER_TRANSFORMATION">
                            <img src="../../assets/img/market_icon2.svg" alt="" class="market_icon">
                            <span class="market_name">新客转化</span>
                            <span class="market_text">以提升新客对生意的贡献为主要目标。系统将定向覆盖高意向新客并促成转化</span>
                            <img src="../../assets/img/market_checked.svg" alt="" class="market_check">
                        </el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="" prop="extension" :rules="{required: true, message: '请选择推广方式', trigger: ['blur', 'change']}" style="margin-bottom:0">
                    <div class="market_title" style="margin-top:40px">推广方式</div>
                    <el-radio-group :value="dataForm.extension" class="marker_radio" @input="clearSeetionExt">
                        <el-radio label="SIMPLE" :disabled="simpleDisabled">
                            <img src="../../assets/img/market_icon4.svg" alt="" class="market_icon">
                            <span class="market_name">极速推广</span>
                            <div class="market_text">只需设置预算、出价等关键要素即可投放,支持基础的定向人群选择</div>
                            <img src="../../assets/img/market_checked.svg" alt="" class="market_check">
                        </el-radio>
                        <el-radio label="STANDARD" :disabled="standardDisabled">
                            <img src="../../assets/img/market_icon3.svg" alt="" class="market_icon">
                            <span class="market_name">专业推广</span>
                            <div class="market_text">可自定义更多投放和创意设置,支持更丰富的定向人群选择</div>
                            <img src="../../assets/img/market_checked.svg" alt="" class="market_check">
                        </el-radio>
                    </el-radio-group>
                </el-form-item>
                <div style="margin-top:40px">
                    <el-button type="primary" size="small" class="el-button-width" @click="nextOne('createform')">下一步</el-button>
                </div>
            </el-form>
        </div>
    </div>

</template>

<script>
export default {
    props: ["dataForm"],
    name: "",
    data() {
        return {};
    },
    created() {
        if(!this.dataForm.campaign_scene){
            this.dataForm.campaign_scene = "DAILY_SALE"
        }
    },
    computed:{
        simpleDisabled(){
            let is_true = false
            if(this.dataForm.market=='VIDEO_PROM_GOODS'&&this.dataForm.campaign_scene=='NEW_CUSTOMER_TRANSFORMATION'){
                is_true = true
            }
            return is_true
        },

        standardDisabled(){
            let is_true = false
            if(this.dataForm.market=='LIVE_PROM_GOODS'&&this.dataForm.campaign_scene=='NEW_CUSTOMER_TRANSFORMATION'){
                is_true = true
            }
            return is_true
        }
    },
    methods: {
        // nextOne() {
        //     this.dataForm.step = 2;
        //     this.dataForm.isChange = true;
        //     window.sessionStorage.setItem(
        //         "dataForm",
        //         JSON.stringify(this.dataForm)
        //     );
        // },

        // 提交添加
        nextOne(formName) {
            this.$refs[formName].validate(async (valid) => {
                if (valid) {
                    this.dataForm.step = 2;
                    this.dataForm.isChange = true;
                    window.sessionStorage.setItem(
                        "dataForm",
                        JSON.stringify(this.dataForm)
                    );
                } else {
                    this.loading = false;
                    this.$message.error("请完善信息！");
                    return false;
                }
            });
        },

        clearSeetion(val) {
            if (this.dataForm.isChange) {
                this.$confirm(
                    "更改营销目标后，所有结果将会被清空，是否继续？",
                    "提示",
                    {
                        confirmButtonText: "确定",
                        cancelButtonText: "取消",
                        type: "warning",
                    }
                )
                    .then(() => {
                        sessionStorage.removeItem("dataForm");
                        this.$parent.dataForm = JSON.parse(
                            JSON.stringify(this.$parent.resetForm)
                        );
                        // this.$parent.dataForm.market = val;
                    })
                    .catch(() => {});
            } else {
                this.dataForm.market = val;
                if (val == "VIDEO_PROM_GOODS") {
                    if(this.dataForm.campaign_scene == "NEW_CUSTOMER_TRANSFORMATION"){
                        this.dataForm.extension = "STANDARD"
                    }
                }else if(val == "LIVE_PROM_GOODS"){
                    if(this.dataForm.campaign_scene == "NEW_CUSTOMER_TRANSFORMATION"){
                        this.dataForm.extension = "SIMPLE"
                    }    
                }
                window.sessionStorage.setItem(
                    "dataForm",
                    JSON.stringify(this.dataForm)
                );
            }
        },

        selectCampaign(val) {
            // if (val == "NEW_CUSTOMER_TRANSFORMATION") {
            //     this.dataForm.extension = "SIMPLE";
            // }
            // window.sessionStorage.setItem(
            //     "dataForm",
            //     JSON.stringify(this.dataForm)
            // );
            if (this.dataForm.isChange) {
                this.$confirm(
                    "更改营销场景后，所有结果将会被清空，是否继续？",
                    "提示",
                    {
                        confirmButtonText: "确定",
                        cancelButtonText: "取消",
                        type: "warning",
                    }
                )
                    .then(() => {
                        sessionStorage.removeItem("dataForm");
                        this.$parent.dataForm = JSON.parse(
                            JSON.stringify(this.$parent.resetForm)
                        );
                        // this.$parent.dataForm.campaign_scene = val;
                    })
                    .catch(() => {});
            } else {
                this.dataForm.campaign_scene = val;
                if (val == "NEW_CUSTOMER_TRANSFORMATION") {
                    if(this.dataForm.market=='VIDEO_PROM_GOODS'){
                        this.dataForm.extension = "STANDARD";
                    }else{
                        this.dataForm.extension = "SIMPLE";
                    }
                }
                window.sessionStorage.setItem(
                    "dataForm",
                    JSON.stringify(this.dataForm)
                );
            }
        },

        clearSeetionExt(val) {
            if (this.dataForm.isChange) {
                this.$confirm(
                    "更改推广方式后，所有结果将会被清空，是否继续？",
                    "提示",
                    {
                        confirmButtonText: "确定",
                        cancelButtonText: "取消",
                        type: "warning",
                    }
                )
                    .then(() => {
                        sessionStorage.removeItem("dataForm");
                        this.$parent.dataForm = JSON.parse(
                            JSON.stringify(this.$parent.resetForm)
                        );
                        // this.$parent.dataForm.extension = val;
                    })
                    .catch(() => {});
            } else {
                this.dataForm.extension = val;
                window.sessionStorage.setItem(
                    "dataForm",
                    JSON.stringify(this.dataForm)
                );
            }
        },
    },
    components: {},
};
</script>


<style scoped>
.step_box {
    padding: 20px;
}
.market_title {
    font-size: 16px;
    color: #17233d;
    font-weight: bold;
    padding-left: 12px;
    position: relative;
    line-height: 22px;
    margin-bottom: 0;
}
.market_title::after {
    content: "";
    position: absolute;
    height: 12px;
    width: 4px;
    background-color: #4475ff;
    border-radius: 5px;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
}
.market_icon {
    width: 32px;
    height: 32px;
}
.market_name {
    font-size: 14px;
    color: #17233d;
    margin-top: 4px;
    line-height: 22px;
}
.market_text {
    font-size: 14px;
    color: #616c85;
    line-height: 22px;
    margin-top: 4px;
    width: 100%;
}
.market_check {
    position: absolute;
    right: 0px;
    top: 0px;
    display: none;
}
</style>

<style>
.marker_radio .el-radio {
    margin-right: 20px;
    white-space: normal;
}
.marker_radio .el-radio__input {
    width: 0;
    height: 0;
    visibility: hidden;
}
.marker_radio .el-radio__label {
    border: 1px solid #ebebeb;
    border-radius: 2px;
    width: 300px;
    display: flex;
    padding: 16px 20px;
    flex-direction: column;
    position: relative;
}
.marker_radio .el-radio.is-checked .el-radio__label {
    border-color: #4475ff;
    background: rgba(68, 117, 255, 0.05);
}
.marker_radio .el-radio.is-checked .el-radio__label .market_check {
    display: block;
}
</style>
